import { ThemeConfig } from 'antd';

// 定义主题变量 - 基于fireCommandCenter配色方案
const primaryColor = '#03d2fd'; // 科技蓝主色调
const successColor = '#1cfeba'; // 青绿色
const warningColor = '#faad14'; // 警告色保持不变
const errorColor = '#ff4d4f';   // 错误色保持不变
const infoColor = '#03d2fd';    // 信息色使用主色调

// 主题配置
export const themeConfig: ThemeConfig = {
  token: {
    // 颜色配置
    colorPrimary: primaryColor, // 主色调
    colorSuccess: successColor, // 成功色
    colorWarning: warningColor, // 警告色
    colorError: errorColor, // 错误色
    colorInfo: infoColor, // 信息色
    
    // 字体配置 - 优化BI大屏显示
    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif',
    fontSize: 14,
    fontSizeHeading1: 30,
    fontSizeHeading2: 24,
    fontSizeHeading3: 20,
    fontSizeHeading4: 18,
    fontSizeHeading5: 16,
    
    // 圆角配置
    borderRadius: 6,
    
    // 间距和大小配置
    sizeUnit: 4,
    sizeStep: 4,
    
    // 动画配置
    motionUnit: 0.1,
    motionBase: 0,
  },
  components: {
    // 按钮组件样式
    Button: {
      colorPrimary: primaryColor,
      algorithm: true, // 使用算法生成派生颜色
    },
    // 表单组件样式
    Input: {
      colorBgContainer: '#ffffff',
      colorBorder: '#03d2fd',
      borderRadius: 6,
    },
    // 表格组件样式
    Table: {
      colorBgContainer: '#ffffff',
      fontSize: 14,
      borderRadius: 6,
      // 数据大屏专用表格样式
      headerBg: 'rgba(3, 29, 69, 0.8)',
      headerColor: '#03d2fd',
      rowHoverBg: 'rgba(3, 29, 69, 0.8)',
      borderColor: 'rgba(28, 254, 186, 0.2)',
    },
    // 菜单组件样式
    Menu: {
      itemBg: 'transparent',
      itemColor: 'rgba(0, 0, 0, 0.88)',
      itemSelectedBg: 'rgba(3, 210, 253, 0.1)',
      itemSelectedColor: primaryColor,
    },
    // 卡片组件样式
    Card: {
      colorBgContainer: '#ffffff',
      borderRadius: 8,
      boxShadow: '0 2px 8px rgba(3, 210, 253, 0.1)',
    },
    // 模态框组件样式
    Modal: {
      borderRadius: 8,
    },
    // 下拉菜单组件样式
    Dropdown: {
      colorBgElevated: '#ffffff',
      borderRadiusLG: 8,
    },
    // 标签组件样式
    Tag: {
      fontSize: 12,
    },
    // 消息提示组件样式
    Message: {
      fontSize: 14,
    },
    // 通知提醒组件样式
    Notification: {
      fontSize: 14,
    },
  },
};

// 导出单独的颜色常量以便在其他地方使用
export const colors = {
  primary: primaryColor,
  success: successColor,
  warning: warningColor,
  error: errorColor,
  info: infoColor,
};

// ================== 完整的全局配色系统 ==================

// 1. 基础色彩定义
export const baseColors = {
  // 主要品牌色
  primary: '#03d2fd',       // 科技蓝主色调
  secondary: '#1cfeba',     // 青绿色辅助色
  accent: '#8040ff',        // 紫色强调色
  
  // 功能色彩
  success: '#1cfeba',       // 成功色
  warning: '#faad14',       // 警告色
  error: '#ff4d4f',         // 错误色
  info: '#03d2fd',          // 信息色
  
  // 中性色彩
  white: '#ffffff',
  black: '#000000',
  gray: {
    50: '#f9fafb',
    100: '#f3f4f6',
    200: '#e5e7eb',
    300: '#d1d5db',
    400: '#9ca3af',
    500: '#6b7280',
    600: '#4b5563',
    700: '#374151',
    800: '#1f2937',
    900: '#111827',
  }
};

// 2. BI大屏专用配色方案
export const biScreenColors = {
  // 主要背景和基础色
  primary: baseColors.primary,
  secondary: baseColors.secondary,
  background: '#0f1527',               // 主背景深蓝灰
  cardBg: 'rgba(3, 16, 45, 0.6)',     // 卡片背景
  hoverBg: 'rgba(3, 29, 69, 0.8)',    // 悬浮背景
  overlayBg: 'rgba(3, 16, 45, 0.95)', // 遮罩背景
  
  // 文字颜色
  text: {
    primary: '#ffffff',                 // 主要文字
    secondary: 'rgba(255, 255, 255, 0.85)', // 次要文字
    accent: '#03d2fd',                 // 强调文字
    muted: 'rgba(255, 255, 255, 0.6)', // 弱化文字
  },
  
  // 边框和分割线
  border: {
    primary: '#03d2fd',                // 主要边框
    secondary: '#1cfeba',              // 次要边框
    muted: 'rgba(3, 210, 253, 0.3)',  // 弱化边框
  },
  
  // 渐变色系列（8种蓝色渐变）
  gradientColors: [
    '#2ac6ff66', '#00a8ff66', '#41b0ff66', '#148cff66',
    '#308aff66', '#507dff66', '#6060ff66', '#8040ff66'
  ],
  
  // 排行榜专用色
  ranking: {
    gold: '#FFD700',     // 金色
    silver: '#C0C0C0',   // 银色
    bronze: '#CD7F32',   // 铜色
    danger: '#ff000066'  // 危险红色
  },
  
  // 按钮和交互色
  button: {
    primary: 'rgba(0, 168, 255, 0.4)',      // 主要按钮
    primaryHover: 'rgba(0, 168, 255, 0.6)', // 主要按钮悬浮
    secondary: 'rgba(3, 210, 253, 0.1)',    // 次要按钮
    border: '#00a8ff',                       // 按钮边框
  }
};

// 3. 图表配色方案
export const chartColors = {
  // 主要图表色板
  primary: [
    '#37A2FF', '#67E0E3', '#FFDB5C', '#FF9F7F', 
    '#E062AE', '#37A2DA', '#32C5E9', '#67E0E3'
  ],
  
  // 蓝色系列（适合BI大屏）
  blues: [
    '#148cff', '#308aff', '#507dff', '#6060ff',
    '#5B8FF9', '#1890FF', '#36CFC9', '#52C41A'
  ],
  
  // 渐变色
  gradients: biScreenColors.gradientColors,
  
  // 地图配色
  map: {
    area: '#2ac6ff66',           // 区域默认色
    border: '#1cfeba',           // 区域边框色
    highlight: '#148cff66',      // 高亮区域色
    text: '#ffffff',             // 地图文字
    shadow: '#182f68',           // 阴影色
  },
  
  // 状态色
  status: {
    online: '#1cfeba',          // 在线状态
    offline: '#ff4d4f',         // 离线状态
    warning: '#faad14',         // 警告状态
    normal: '#03d2fd',          // 正常状态
  }
};

// 4. 组件样式配置
export const componentStyles = {
  // 卡片样式
  card: {
    background: biScreenColors.cardBg,
    border: biScreenColors.border.primary,
    borderRadius: '8px',
    boxShadow: '0 2px 8px rgba(3, 210, 253, 0.1)',
    hover: {
      background: biScreenColors.hoverBg,
      transform: 'translateY(-2px)',
      transition: 'all 0.3s ease'
    }
  },
  
  // 按钮样式
  button: {
    primary: {
      background: biScreenColors.button.primary,
      border: biScreenColors.button.border,
      color: baseColors.white,
      hover: {
        background: biScreenColors.button.primaryHover,
      }
    },
    secondary: {
      background: biScreenColors.button.secondary,
      border: biScreenColors.border.primary,
      color: biScreenColors.primary,
    }
  },
  
  // 表格样式
  table: {
    header: {
      background: biScreenColors.cardBg,
      color: biScreenColors.primary,
      borderBottom: `1px solid ${biScreenColors.border.muted}`
    },
    row: {
      background: 'transparent',
      hover: biScreenColors.hoverBg,
      border: `1px solid ${biScreenColors.border.muted}`
    }
  }
};

// 5. 动画和过渡配置
export const animations = {
  duration: {
    fast: '0.15s',
    normal: '0.3s',
    slow: '0.5s'
  },
  easing: {
    ease: 'ease',
    easeInOut: 'ease-in-out',
    easeOut: 'ease-out'
  },
  hover: {
    transform: 'translateY(-2px)',
    transition: 'all 0.3s ease',
    boxShadow: '0 4px 16px rgba(3, 210, 253, 0.2)'
  }
};

// 6. 向后兼容的旧版配色导出
export { biScreenColors as fireCommandCenterColors };

// 7. 工具函数 - 获取渐变色
export const getGradientColor = (index: number): string => {
  return biScreenColors.gradientColors[index % biScreenColors.gradientColors.length];
};

// 8. 工具函数 - 获取图表色
export const getChartColor = (index: number, type: 'primary' | 'blues' = 'primary'): string => {
  const colors = chartColors[type];
  return colors[index % colors.length];
};

// 9. 工具函数 - 获取状态色
export const getStatusColor = (status: 'online' | 'offline' | 'warning' | 'normal'): string => {
  return chartColors.status[status] || chartColors.status.normal;
};

// 10. 工具函数 - 获取排行榜色
export const getRankingColor = (rank: number): string => {
  if (rank === 1) return biScreenColors.ranking.gold;
  if (rank === 2) return biScreenColors.ranking.silver;
  if (rank === 3) return biScreenColors.ranking.bronze;
  return 'transparent';
};

// ================== 数据大屏样式工具函数 ==================

// 获取数据大屏表格样式类名
export const getDataScreenTableClass = (isDark: boolean = true): string => {
  return isDark ? 'custom-table' : 'custom-table';
};

// 获取数据大屏按钮样式类名
export const getDataScreenButtonClass = (type: 'primary' | 'secondary' = 'primary'): string => {
  return type === 'primary' ? 'custom-button' : 'bi-button-secondary';
};

// 获取数据大屏动画类名
export const getDataScreenAnimationClass = (type: 'pulse' | 'blink' | 'rotate'): string => {
  switch (type) {
    case 'pulse':
      return 'pulse-animation';
    case 'blink':
      return 'blink';
    case 'rotate':
      return 'rotate';
    default:
      return '';
  }
};

// 获取数据大屏文字大小（响应式）
export const getDataScreenTextSize = (baseSize: number, screenWidth?: number): string => {
  const width = screenWidth || (typeof window !== 'undefined' ? window.innerWidth : 1920);
  if (width <= 1600) {
    // 在小屏幕上减小字体大小
    const scaleFactor = 0.8;
    return `${Math.round(baseSize * scaleFactor)}px`;
  }
  return `${baseSize}px`;
};

// 数据大屏专用样式常量
export const dataScreenStyles = {
  // 表格样式
  table: {
    headerBg: 'rgba(3, 29, 69, 0.8)',
    headerColor: '#03d2fd',
    bodyBg: 'transparent',
    bodyColor: '#fff',
    hoverBg: 'rgba(3, 29, 69, 0.8)',
    borderColor: 'rgba(28, 254, 186, 0.2)',
  },
  
  // 按钮样式
  button: {
    primaryGradient: 'linear-gradient(to right, #03d2fd, #1cfeba)',
    primaryShadow: '0 0 10px rgba(3, 210, 253, 0.5)',
  },
  
  // 动画持续时间
  animation: {
    pulse: '2s',
    blink: '2s',
    rotate: '10s',
    hover: '0.3s',
  },
  
  // 响应式断点
  breakpoints: {
    small: 1600,
    medium: 1920,
    large: 2560,
  },
  
  // 滚动条样式（隐藏）
  scrollbar: {
    width: 0,
    height: 0,
  },
}; 